Clicky

Eliminar las URLs no seguras en el contenido mixto HTTP/HTTPS

URL segura

Quitar el icono de candado con triángulo amarillo de advertencia en los navegadores

Como veíamos en nuestro anterior artículo, ya tenemos nuestro sitio aprobado por una autoridad de certificación SSL/TLS (Security Socket Layer/Transport Layer Security), en este caso la nueva y gratuita Let"™s Encrypt. Pero no nos aparece el candado verde de navegación segura ¿Por qué?

A diferencia de las URLs HTTP que comienzan con el protocolo "http://" y emplean el puerto 80 por defecto, las URLs HTTPS comienzan con el protocolo "https://" y emplean el puerto 443 por defecto.

El protocolo HTTP es inseguro y susceptible de ataques por parte de los intrusos. Si los datos confidenciales transmitidos (por ejemplo los datos de una tarjeta de crédito o la información de una cuenta de usuario) cayesen en manos de la persona equivocada, los intrusos podrían acceder a cuentas online y consultar información confidencial. Cuando se emplea un protocolo HTTPS para enviar información a través de un navegador, tal información aparece encriptada y protegida.

Sin embargo, si una página HTTPS incluye contenido HTTP, la porción HTTP puede ser leída o modificada por los atacantes, aunque la página principal se sirva a través de HTTPS. Cuando una página HTTPS tiene contenido HTTP, decimos que el contenido es "mixto". La página web que el usuario está visitando está cifrada sólo parcialmente, ya que algunos de los contenidos se recuperan sin cifrar a través de HTTP. Por tanto, el bloqueador de contenido mixto de los navegadores (Mixed Content Blocker) bloquea ciertas peticiones HTTP en páginas HTTPS.

A partir de la versión 23 de Firefox, este navegador bloquea por defecto el Contenido Mixto Activo. Este comportamiento sigue una práctica adoptada por Internet Explorer (desde la versión 9) y Chrome.

candado de aviso amarillo de contenido mixtoEsta es una advertencia de Chrome:

Tu conexión al sitio web está encriptada, pero Google Chrome ha detectado contenido en la página que podría corresponderse con imágenes o anuncios no deseados. Te recomendamos que no introduzcas información personal.

La mejor estrategia para evitar el bloqueo de contenido mixto es servir todo el contenido como HTTPS en lugar de HTTP.

Corrigiendo en el contenido los enlaces de http:// a https://

Me voy a referir al caso concreto de dos páginas que publico https://www.vistaalmar.es y https://pirman.es desarrolladas con el CMS Joomla!

Lo primero que debemos hacer es arreglar los enlaces. A menudo, la versión HTTPS del contenido ya existe y esto sólo requiere la adición de una "s" a los enlaces: http:// a https://.

Cuando estábamos escribiendo un determinado artículo y queríamos hacer referencia a otro artículo relacionado publicado anteriormente, colocábamos en nuestro editor de texto de Joomla! la URL de este último. Si es un sitio con años de antiguedad y miles de artículos, estos anlaces antiguos con http:// pueden ser llegar a una cantidad enorme.

Para corregir esto, hablo en particular de Joomla!, lo mejor es descargar desde PhpMyAdmin la tabla _content de nuestra base de datos y editarla con, por ejemplo, Notepad ++ .

editar con Notepad ++ la tabla de la base de datos

Como vemos en la imagen de arriba, en el buscador del editor colocaremos la URL principal del sitio que queremos modificar (en este caso http://www.vistaalmar.es/ ) y dejaremos en blanco la caja de Reemplazar con:, de este modo nos aseguraremos que todas las URLs que queden serán relativas y no absolutas. Ejecutando Reemplazar todo Notepad ++ nos facilitará un archivo sin las antiguas URLs, que nombraremos de otra forma para conservar el antiguo como respaldo en caso de problemas.

Ahora en PhpMyAdmin borraremos la tabla _content e importaremos el archivo que acabamos de modificar con Notepad ++ . De esta manera tenemos asegurado que todo nuestro contenido (incluidas las imágenes) esté con URLs relativas que serán adaptadas al nuevo https://

Un vistazo al código fuente

La mejor manera de localizar las URLs con el protocolo http:// no seguro es mirar el código fuente de nuestra página. Nos dará una idea de dónde se encuentran el resto de enlaces que tenemos que corregir. En el caso del ejemplo localicé que había algunos, propios y externos, en los módulos de contenido de la derecha de la página y en el footer.

Las URLs propias del sitio las corregiremos manualmente dejándolas, preferiblemente, como relativas según lo indicado más arriba.

A las URLs que son externas al sitio, como pueden ser Twitter, Google+, Facebook, FeedBurner, etc., debemos añadir una "s" a http:// y dejarlas así: https:// y luego comprobar en el navegador que se cargan correctamente. (Normalmente estos grandes sitios ya están adaptados al protocolo HTTPS). Para los que no carguen en el navegador con https:// lo mejor es cortar por lo sano y eliminarlas directamente. Ojo, si tienes enlaces a algún sitio al que tienes un cariño especial deberías comunicarle al webmaster tu decisión.

Usando las Herramientas de desarrollador de Chrome

Con lo expuesto anteriormente nos deberían quedar muy pocas URLs con el protocolo HTTP, pero todavía veremos en el navegador el candado con el triángulo amarillo de advertencia.

Para localizar lo que nos falta por corregir utilizaremos las Herramientas de desarrollador de Chrome.

Para ello, ve a tu página web con el navegador mediante HTTPS. En el menú del navegador en forma de hamburguesa en la parte superior derecha, ve a Más herramientas → Herramientas para desarrolladores → Consola JavaScript.

Busca los mensajes de error de contenido mixto:

contenido mixto activo

"Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://<some-url>/script.js'. This request has been blocked; the content must be served over HTTPS."

"Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure image 'http://<some-url>/image.jpg'. This content should also be served over HTTPS."

Revisa uno a uno los mensajes de contenido mixto y corrige los errores de todas las URL no seguras citadas en los mensajes de error, no tardarás mucho tiempo en hacerlo y te aparecerá el bonito candado en verde de navegación cifrada segura.

perro http no seguro perro https seguro

Para una explicación más detallada lee el artículo de Google: Find and fix mixed content

Jesus_Caceres